<template>
	<div>
		<!-- 章节 -->
		<div class="Browse_nav">
			<div
				class="Browse"
				@click="showPopup"
				:class="[
					{ bule: bules == this.blue },
					{ protection: protection == this.blue },
					{ transition: transition == true },
					{ transform_left: transformLeft == true },
					{ transform_rigth: transformRigth == true },
					{ transform: transform == true },
				]"
			>
				<div class="title">
					<h1
						:style="{ fontSize: `${hsizise}px` }"
						:class="[{ bule: bules == this.blue }, { protection: protection == this.blue }]"
					>
						{{ this.title }}
					</h1>
				</div>
				<!-- <div class="content" ref="xxx" :style="{ transform: `translateX(-${xv}px)` }"> -->

				<!-- &.transition{
				transition: all 1.2s;
			}
			&.transform_left{
				transform: translateX(-100%);
			}
			&.transform_rigth{
				transform: translateX(100%);
			}
			&.transform{
				transform: translate(0);
			} -->

				<div class=" content ">
					<p v-for="(item, index) in this.content" :key="index" :style="{ fontSize: `${boksize}px` }">
						{{ item }}
					</p>
				</div>
			</div>

			<div class="Catalogue" :class="{ con: this.suncon != true }">
				<div class="Catalogue_nav">
					<h1>{{ this.title }}</h1>
					<p>目录</p>
				</div>
				<div class="Catalogue_ul">
					<div v-for="(item, index) in this.CatalogueLists" :key="index" @click="getBrowse(item.link)">
						{{ item.title }}
					</div>
				</div>
			</div>

			<van-popup
				v-model="show"
				position="top"
				:overlay="false"
				:style="{ backgroundColor: 'rgba(50,51,52,0.9)' }"
			>
				<div class="nav">
					<div class="nav_left">
						<div class="iconfont icon-fanhui" @click="gettply"></div>
						<span>返回</span>
					</div>
					<div class="nav_centen">
						<p class="centen">{{ this.title }}</p>
					</div>
					<div class="nav_rigth" @click="navhone">
						<div class="iconfont icon-santiaoxian_"></div>
					</div>
					<div class="nav_hone" v-show="showhone">
						<p class="sanjiao"></p>
						<div class="div" @click="home">
							<p class="iconfont icon-home"></p>
							<span>首页</span>
						</div>
						<div class="div" @click="shujia">
							<p class="iconfont icon-shujia1"></p>
							<span>书架</span>
						</div>
						<div class="div" @click="yuanjiaojuxing">
							<p class="iconfont icon-yuanjiaojuxing988"></p>
							<span>详情</span>
						</div>
					</div>
				</div>
			</van-popup>
			<van-popup
				v-model="show"
				position="bottom"
				:overlay="false"
				:style="{ backgroundColor: 'rgba(50,51,52,0.9)' }"
			>
				<div class="fale_botton">
					<div class="input">
						<span class="fale_span" @click="GetLess">Aa-</span>
						<span class="nav_span">
							<span class="sapn_rogth" ref="sapnrogth" :style="'width:' + this.yv + 'px'"></span>
						</span>
						<span class="fale_span" @click="GetRogth">Aa+</span>
					</div>
				</div>
				<div class="ul">
					<ul>
						<ol
							v-for="(item, index) in this.lists"
							:class="{ con: num == index }"
							:key="index"
							@click="(num = index), getindex(index)"
						>
							{{
								item
							}}
						</ol>
					</ul>
				</div>
				<div class="chapter">
					<div class="chapter_left" @click="PreviousChapter">
						上一章
					</div>
					<div class="chapter_left" @click="Catalogue">
						目录
					</div>
					<div class="chapter_left" @click="NextChapter">
						下一章
					</div>
				</div>
			</van-popup>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			content: null,
			title: null,
			showhone: false,
			num: 0,
			sum: 0,
			bules: 1,
			protection: 2,
			blue: '',
			x: 0,
			xv: 0,
			lists: ['默认', '夜间', '护眼'],
			datalists: null,
			y: 1,
			yv: 0,
			sssss: null,
			hsizise: 32,
			boksize: 20,
			suncon: true,
			CatalogueLists: null,
			bacertan: false,
			booksize: true,
			transition: false,
			transformLeft: false,
			transformRigth: false,
			transform: false,
		};
	},
	methods: {
		GetRogth() {
			if (this.yv >= 300) {
				return;
			}
			this.yv = this.yv + 100;
			this.boksize = this.boksize + 10;
			this.hsizise = this.hsizise + 10;
		},
		GetLess() {
			if (this.yv <= 0) {
				return;
			}
			this.yv = this.yv - 100;
			this.boksize = this.boksize - 10;
			this.hsizise = this.hsizise - 10;
		},
		getBrowse(link) {
			localStorage.setItem('Books_Link', link);
			let Link = localStorage.getItem('Books_Link');
			if (Link) {
				this.$axios.get('http://novel.kele8.cn/chapters/' + encodeURIComponent(Link)).then((res) => {
					this.content = res.data.chapter.cpContent.split('\r\n');
					this.title = res.data.chapter.title;
				});
			} else {
				console.log('没有带章节');
			}
		},
		showPopup() {
			if (this.suncon == false) {
				this.suncon = true;
				return;
			}
			this.show = !this.show;
		},
		navhone() {
			this.showhone = !this.showhone;
		},
		getindex(index) {
			this.blue = index;
		},
		Catalogue() {
			this.suncon = !this.suncon;
			this.show = !this.show;
		},
		PreviousChapter() {
			this.transition = true;
			this.transformLeft = true;
			this.booksize = false;
			let boosk_id = localStorage.getItem('boosk_id');
			this.$axios.get('http://novel.kele8.cn/book-sources?div=summary&book=' + boosk_id).then((res) => {
				this.$axios.get('http://novel.kele8.cn/book-chapters/' + res.data[0]._id).then((data) => {
					this.datalists = data.data.chapters;
					let lists = localStorage.getItem('Books_Link');
					this.datalists.filter((item, imdex) => {
						if (imdex == 0) {
							console.log('没有带章节');
							this.$toast.clear();
							return;
						}
						if (item.link == lists) {
							localStorage.setItem('Books_Link', this.datalists[imdex - 1].link);
							let don = localStorage.getItem('Books_Link');
							this.xv = this.x * (this.$refs.xxx.offsetWidth + 40);
							if (don) {
								this.$axios
									.get('http://novel.kele8.cn/chapters/' + encodeURIComponent(don))
									.then((res) => {
										setTimeout(() => {
											this.transition = false;
											this.transformRigth = true;
											setTimeout(() => {
												this.transition = true;
												// this.transformRigth = true;
												this.transform = true;
												this.content = res.data.chapter.cpContent.split('\r\n');
												this.title = res.data.chapter.title;
											}, 500);
										}, 500);
										this.booksize = true;
									});
							} else {
								console.log('没有带章节');
							}
							return (this.x = 0);
						}
					});
				});
			});
		},
		NextChapter() {
			this.transition = true;
			this.transformLeft = true;
			this.booksize = false;
			console.log(this.booksize);
			let boosk_id = localStorage.getItem('boosk_id');
			this.$axios.get('http://novel.kele8.cn/book-sources?div=summary&book=' + boosk_id).then((res) => {
				this.$axios.get('http://novel.kele8.cn/book-chapters/' + res.data[0]._id).then((data) => {
					this.datalists = data.data.chapters;
					let lists = localStorage.getItem('Books_Link');
					this.datalists.filter((item) => {
						this.x++;
						if (this.x == this.datalists.length) {
							this.x = this.x - 1;
							// return;
						}
						if (item.link == lists) {
							localStorage.setItem('Books_Link', this.datalists[this.x].link);
							let don = localStorage.getItem('Books_Link');
							if (don) {
								this.$axios
									.get('http://novel.kele8.cn/chapters/' + encodeURIComponent(don))
									.then((res) => {
										setTimeout(() => {
											this.transition = false;
											this.transformRigth = true;
											setTimeout(() => {
												this.transition = true;
												// this.transformRigth = true;
												this.transform = true;
												this.content = res.data.chapter.cpContent.split('\r\n');
												this.title = res.data.chapter.title;
											}, 500);
										}, 500);
										this.booksize = true;
									});
							} else {
								console.log('没有带章节');
							}
							return (this.x = 0);
						}
					});
				});
			});
		},
		gettply() {
			this.$router.push({
				path: '/Bookdetails/Chapter',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
		home() {
			this.$store.commit('showlists', (this.showlists = false));
			this.$router.push({
				path: '/Male',
			});
		},
		shujia() {
			this.$router.push({
				path: '/Bookdetails/Bookshelf',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
		yuanjiaojuxing() {
			this.$router.push({
				path: '/Bookdetails',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
	},
	created() {
		this.$store.commit('showlists', (this.showlists = true));
		this.$toast.loading({
			duration: 0,
			forbidClick: true,
			mask: true,
			message: '加载中...',
		});
		let boosk_id = localStorage.getItem('boosk_id');
		let Link = localStorage.getItem('Books_Link');
		console.log(Link);
		if (Link) {
			this.$axios.get('http://novel.kele8.cn/chapters/' + encodeURIComponent(Link)).then((res) => {
				this.content = res.data.chapter.cpContent.split('\r\n');
				this.title = res.data.chapter.title;
				this.$axios.get('http://novel.kele8.cn/book-sources?view=summary&book=' + boosk_id).then((res) => {
					this.$axios.get('http://novel.kele8.cn/book-chapters/' + res.data[0]._id).then((data) => {
						this.CatalogueLists = data.data.chapters;
						this.$toast.clear();
						// console.log(data);
					});
				});
			});
		} else {
			console.log('没有带章节');
			this.$toast.clear();
		}
	},
};
</script>

<style lang="less" scoped>
.Browse_nav {
	width: 640px;
	position: relative;
	.Browse {
		// width: 640px;
		background-color: #eee6dd;
		padding: 0 30px;
		// transition: all 1.2s;
		transform: translate(0px);
		overflow: hidden;
		// &.action {
		// 	transform: translate(-640px);
		// 	margin-left: -640px;
		// }
		&.transition {
			transition: all 1.2s;
		}
		&.transform_left {
			transform: translateX(-100%);
		}
		&.transform_rigth {
			transform: translateX(100%);
		}
		&.transform {
			transform: translate(0);
		}
		.title {
			h1 {
				font-weight: 400;
				color: #333;
				padding: 8.53328px;
				line-height: 1.5;
				&.bule {
					background-color: rgba(50, 51, 52, 1);
					color: #666666;
				}
				&.protection {
					background-color: #b8cd8d;
					color: #2f4e29;
				}
			}
		}
		.content {
			line-height: 1.8em;
			column-width: 710rpx;
			// height: 100vh;
			// overflow-x: auto;
			// column-gap: 40px;
			// transition: all 1.2s;
			p {
				font-size: 26px;
				// text-indent: 2em;
				line-height: 1.5;
				text-align: justify;
				margin: 2.13328px;
			}
		}
	}
	.nav {
		width: 640px;
		// background-color: rgba(50,51,52,.9);
		display: flex;
		justify-content: space-between;
		position: relative;
		.nav_left {
			flex: 0 0 100px;
			display: flex;
			.iconfont {
				font-size: 30px;
				line-height: 70px;
				color: #fff;
				margin-left: 10px;
			}
			span {
				line-height: 70px;
				color: #fff;
				font-size: 16px;
			}
		}
		.nav_centen {
			flex: 1;
			margin: 15px 0;
			// background: #999;
			display: flex;
			.centen {
				margin: 0 auto;
				color: #fff;
				margin-top: 8px;
				font-size: 18px;
			}
		}
		.nav_rigth {
			flex: 0 0 100px;
			display: flex;
			// background-color: #e9e9e9;
			.iconfont {
				font-size: 40px;
				line-height: 70px;
				margin: 0 auto;
				color: #fff;
			}
			div:nth-child(2) {
				font-size: 35px;
			}
		}
	}
	.nav_hone {
		width: 164px;
		height: 164px;
		background-color: #323334;
		position: fixed;
		top: 94px;
		right: 20px;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
		color: #ababab;
		.sanjiao {
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-bottom: 10px solid #323334;
			position: absolute;
			top: -18px;
			right: 20px;
		}
		.div {
			width: 100%;
			// flex: 1;
			flex-wrap: wrap;
			display: flex;
			justify-content: center;
			.iconfont {
				font-size: 30px;
			}
			.icon-shujia1 {
				font-size: 24px;
			}
			.icon-yuanjiaojuxing988 {
				font-size: 24px;
			}
			span {
				font-size: 24px;
				padding: 0 6px 0;
				margin-top: -3px;
				color: #ffffff;
			}
		}
	}
	.fale_botton {
		padding: 46px 20px;
		.input {
			display: flex;
			.fale_span {
				color: #fff;
				width: 100px;
				text-align: center;
				font-size: 26px;
			}
			.nav_span {
				width: 300px;
				display: inline-block;
				height: 5px;
				background-color: #ababab;
				position: relative;
				margin-top: 15px;
				.sapn_rogth {
					width: 100px;
					position: absolute;
					display: inline-block;
					height: 5px;
					background-color: red;
				}
			}
		}
	}
	.ul {
		padding-left: 20px;
		padding-bottom: 1.6875rem;
		ul {
			display: flex;
			ol {
				border: 1px solid rgba(#ccc, 0.5);
				padding: 10px 50px;
				margin-left: 20px;
				border-radius: 5px;
				font-size: 20px;
			}
			.con {
				border: 1px solid red;
				color: red;
				// background-color: #323334;
			}
		}
	}
	.chapter {
		padding-bottom: 30px;
		display: flex;
		text-align: center;
		div {
			flex: 1;
			font-size: 30px;
			color: #ababab;
			&.action {
				color: #fff;
			}
		}
	}
	.bule,
	.bule p {
		background-color: rgba(50, 51, 52, 1);
		color: #666666;
	}
	.protection,
	.protection p {
		background-color: #b8cd8d;
		color: #2f4e29;
	}
	.Catalogue {
		height: 200vh;
		width: 480px;
		background-color: #fff;
		position: fixed;
		top: 0;
		transition: 2s all;
		transform: translateX(-100%);
		// font-size: 50px;
		&.con {
			transform: translateX(0rem) !important;
		}
		.Catalogue_nav {
			padding: 20px 0 10px 20px;
			border-bottom: 1px solid #fcfcfc;
			h1 {
				font-weight: normal;
				padding-bottom: 20px;
				color: #5f5f5f;
			}
			p {
				font-size: 24px;
				color: #ababab;
			}
		}
		.Catalogue_ul {
			height: 100%;
			overflow: scroll;
			div {
				width: 91%;
				margin: 0 auto;
				padding: 20px 0;
				border-bottom: 1px solid #fcfcfc;
				color: #ababab;
			}
		}
	}
}
</style>
